<template>
	<view class="ma" v-if="list.length>0">
		<view class="box" :style="blockStyle">
			<view class="box-head" :style="headStyle">
				<view class="head-title">
					<view class="title-icon" :class="mydata.content.icon" :style="headIconStyle"></view>
					<text class="txt" :style="headTxtStyle">{{mydata.content.title}}</text>
					<view :style="headTimeStyle">
						<view class="load-time" :style="'color:' + mydata.color.time_text_color">
							<text class="_span">{{ type == 0 ? '距开始' : '还剩' }}：</text>
							<u-count-down
								separator-size="24"
								font-size="24"
								:separator-color="mydata.color.time_text_color"
								:bg-color="mydata.color.time_bg_color"
								:color="mydata.color.time_num_color"
								:timestamp="time"
								separator="zh"
							></u-count-down>
						</view>
					</view>
				</view>
				<!-- 	<view :style="headMoreStyle">
					<view class="head-more">
						<text>查看更多</text>
						<view class="el-sc-jiantou"></view>
					</view>
				</view> -->
			</view>
			<view class="box-content">
				<view :class="mydata.seckillType == 1 ? 'content' : 'content1'">
					<view class="content-item" :style="'background:' + mydata.color.commodity_bg" @click="todetial(item)" v-for="(item, i) in list" :key="i">
						<view class="item-image"><vimage :imgstyle="'width: 230rpx;height: 230rpx;border-radius: 6rpx;overflow: hidden;'"  :src="item.master" class="good-image"></vimage></view>
						<view class="item-txt">
							<view class="txt-title " :style="'color:' + mydata.color.commodity_title_color">{{ item.goods_name }}</view>
							<view class="txt-title2 u-line-1" v-if="mydata.seckillType == 2">{{ item.subtitle }}</view>
							<view class="txt-price">
								<view class="view" :style="priceTitleStyle">秒杀价</view>
								<text :style="commodityPriceStyle">￥{{ item.activity_price}}</text>
							</view>
							<view class="old-price" :style="oldPriceTitleStyle">￥{{ item.sell_price  }}</view>
							<view class="item-buttom" v-if="mydata.seckillType == 2" @click.stop="gotrolley(item)">马上枪</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import util from '@/common/util.js';

export default {
	data() {
		return {
			time: 0,
			type: 2,
			list:[],

		};
	},
	props: {
		mydata: {
			type: Object,
			default: {}
		}
	},
	mounted() {
		this.getlist();
	},
	computed: {
		blockStyle() {
			let s = 'margin:' + this.mydata.margin.top + 'rpx ' + this.mydata.margin.lr / 2 + 'rpx ' + this.mydata.margin.bottom + 'rpx;';
			s += 'border-radius:' + this.mydata.radius.template_radius + 'rpx;';
			s += 'background:' + this.mydata.color.bg + ';';
			s += 'color:' + this.mydata.color.left + ';';
			s += 'justify-content:' + this.mydata.posAlign + ';';
			return s;
		},
		headIconStyle() {
			return 'color:' + this.mydata.color.head_icon_color + ';';
		},
		headTxtStyle() {
			return 'color:' + this.mydata.color.head_txt_color + ';';
		},
		headStyle() {
			return 'background:' + this.mydata.color.head_bg + ';';
		},

		headMoreStyle() {
			let s = 'display:' + this.mydata.showMore + ';';
			s += 'color:' + this.mydata.color.head_more_color + ';';
			return s;
		},
		commodityTitleStyle() {
			return 'color:' + this.mydata.color.commodity_title_color + ';';
		},
		commodityPriceStyle() {
			return 'color:' + this.mydata.color.commodity_price_color + ';';
		},
		priceTitleStyle() {
			let s = 'background:' + this.mydata.color.price_title_bg + ';';
			s += 'color:' + this.mydata.color.price_title_color + ';';
			return s;
		},
		oldPriceTitleStyle() {
			let s = 'display:' + this.mydata.showoldPrice + ';';
			s += 'color:' + this.mydata.color.old_price_title_color + ';';
			return s;
		},
		headTimeStyle() {
			return 'display:' + this.mydata.showTime + ';';
		}
	},
	methods: {
		getminprice(list, type) {
			let min_list = list.sort((a, b) => {
				return Number(a.activity_price) - Number(b.activity_price) > 0;
			});
			return min_list[0].activity_price;
		},
		getlist() {
			let list = this.mydata.list;
			let cids = [];
			let type = list[0].type == 0 ? 1 : list[0].type;
			list.forEach(a => {
				cids.push(a.id);
			});
			this.$http(
				'/goods/getManyGoods',
				{
					cids: JSON.stringify(cids),
					type: type
				},
				'POST'
			).then(res => {
				if (res.statusCode == 200) {
					let list = res.data.msg;
					let mlist=[]
					list.forEach(a => {
						a.p_type = type;
						a.sellout = !(a.sell - a.total);
						if (a.sku && a.sku.length > 0) {
							a.now_level_price = util.getminprice(a.sku);
						} else {
							if (a.level_price) {
								a.now_level_price = util.getprice(a);
							}
						}
						if (a.seckill) {
							let seckill = a.seckill;
							this.type = seckill.status;							
							if (seckill.status == 1) {
								this.time = (new Date(seckill.end_time) - new Date()) / 1000;
							} else if (seckill.status == 0) {
								this.time = (new Date(seckill.start_time) - new Date()) / 1000;
							}
							if (seckill.has_sku) {
								a.activity_price = this.getminprice(seckill.sku, 1);
							} else {
								a.activity_price = seckill.activity_price;
							}
						mlist.push(a)
						}
					});

					this.list = mlist;
				} else {
				}
			});
		},
		gotrolley(item) {
			let data = {
				show: true,
				id: item.id,
				type: item.p_type
			};
			this.$store.commit('settrolley', data);
		},
		todetial(item) {
			if (item.p_type == '2') {
				this.Jumpurl({
					type: 1,
					link: '../goods/detail?id=' + item.id
				});
			} else {
				this.Jumpurl({
					type: 2,
					id: item.id
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.ma {
	width: 100%;

	.box {
		border-radius: 10rpx;
		overflow: hidden;
		background: #fff;
		box-sizing: border-box;

		.box-head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx 20rpx;

			.head-title {
				font-size: 32rpx;
				margin-right: 10rpx;
				display: flex;
				align-items: center;

				.txt {
					font-weight: bold;
					line-height: 60rpx;
				}

				.title-icon {
					font-size: 44rpx;
					margin-right: 10rpx;
				}

				.load-time {
					color: #fff;
					font-size: 24rpx;
					margin-left: 10rpx;
					font-weight: bold;
					display: flex;
					align-content: center;

					.time {
						width: 32rpx;
						color: #333;
						position: relative;
						z-index: 9;
						text-align: center;
						margin: 0rpx 4rpx;
					}

					.time:before {
						content: '';
						position: absolute;
						top: 0rpx;
						left: -1rpx;
						width: 34rpx;
						height: 34rpx;
						border-radius: 6rpx;
						display: block;
						background: #fff;
						z-index: -1;
					}
				}
			}

			.head-more {
				font-size: 28rpx;
				display: flex;
			}
		}

		.box-content {
			padding: 0 10rpx;

			.content {
				width: 100%;
				padding: 10rpx;
				overflow: auto;
				display: flex;
				.content-item {
					margin: 10rpx;
					padding: 10rpx;
					border-radius: 10rpx;
					background: #fff;

					.item-image {
						width: 230rpx;
						height: 230rpx;
						border-radius: 6rpx;
						overflow: hidden;
						background: #e8e8e8;

						.good-image {
							width: 100%;
							display: block;
						}
					}

					.item-txt {
						font-size: 24rpx;
						
						.txt-title {
							margin: 10rpx 0rpx;
							    overflow: hidden;
							    text-overflow: ellipsis;
							    display: -webkit-box;
							    -webkit-box-orient: vertical;
							    -webkit-line-clamp: 2;
							    height: 80rpx;
							    line-height: 40rpx;
						}

						.txt-price {
							display: flex;
							align-items: center;
							font-weight: bold;
							color: #ff3c29;
							font-size: 28rpx;

							.view {
								background: #ff3c29;
								color: #fff;
								padding: 2rpx 2rpx;
								border-radius: 6rpx;
								margin-right: 10rpx;
								font-size: 24rpx;
							}
						}

						.old-price {
							margin-top: 10rpx;
							color: #666;
							font-size: 24rpx;
							text-decoration: line-through;
						}
					}
				}
			}

			.content1 {
				width: 100%;
				padding: 0rpx 20rpx;

				.content-item {
					padding: 10rpx;
					border-radius: 10rpx;
					background: #fff;
					display: flex;
					margin: 20rpx 0rpx;
					position: relative;

					.item-image {
						width: 230rpx;
						height: 230rpx;
						border-radius: 6rpx;
						overflow: hidden;
						background: #e8e8e8;

						.good-image {
							width: 100%;
							display: block;
						}
					}

					.item-txt {
						margin-left: 20rpx;
						font-size: 28rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						flex: 1;
						width: 400rpx;	
						.txt-title {
							font-size: 32rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							height: 80rpx;
							line-height: 40rpx;
						}
						.group-label {
							background: #ff3c29;
							color: #fff;
							padding: 2rpx 2rpx;
							border-radius: 6rpx;
							margin-right: 10rpx;
							font-size: 24rpx;
							display: inline-block;
							line-height: 1;
						}
						.label-sales {
							margin-bottom: 10rpx;
							display: flex;
							align-items: center;
							color: #ff3c29;
							font-size: 28rpx;

							.sales {
								color: #ff9900;
								font-size: 24rpx;
							}
						}
						.txt-title2 {
							margin: 10rpx 0px;
							font-size: 24rpx;
							color: #999;
						}
						.txt-price {
							display: flex;
							align-items: center;
							font-weight: bold;
							color: #ff3c29;
							font-size: 28rpx;
							.view {
								background: #ff3c29;
								color: #fff;
								padding: 2rpx 2rpx;
								border-radius: 6rpx;
								margin-right: 10rpx;
								font-size: 24rpx;
							}
						}
						.old-price {
							margin-top: 10rpx;
							color: #666;
							font-size: 24rpx;
							text-decoration: line-through;
						}
					}

					.item-buttom {
						padding: 10rpx 30rpx;
						font-size: 24rpx;
						background: #ff3c29;
						border-radius: 60rpx;
						color: #fff;
						position: absolute;
						bottom: 20rpx;
						right: 20rpx;
					}
				}
			}
		}
	}
}
</style>
